import React, { useState, useEffect, useMemo } from 'react'
import { useNavigate, useLocation} from 'react-router-dom';
import { Dropdown, Radio, Space, CapsuleTabs, CascaderView,InfiniteScroll } from 'antd-mobile'
import { ProductCard } from 'react-vant';
import axios from 'axios'
export default function App() {
  const [value, setValue] = useState('')
  const [options, setOptions] = useState([])
  const [selectMother, setSelectMother] = useState(null)
  const [selectChild, setSelectChild] = useState(null)
  const [shopList, setShopList] = useState([])
  const [page, setPage] = useState(8)
  const [hasMore, setHasMore] = useState(true)
  const [selectserve, setSelectserve] = useState(null)
  const navigate = useNavigate()
  useEffect(() => {
    axios.get('http://localhost:3000/cate')
      .then(res => {
        setOptions(res.data.data)
      })
  }, [])
  const mother = useMemo(() => {
    return options.filter(item => !item.parent_id)
  },[options])
  const child = useMemo(() => {
    if(!selectMother) return []

    return options.filter(item => item.parent_id === selectMother)
  },[options,selectMother])
  useEffect(() => {
    axios.get('http://localhost:3000/shop',{params:{cate_id:selectChild,page:page,serve:selectserve,value:value}})
      .then(res => {
        setShopList(res.data.data)
      })
  },[selectMother,selectChild,page,selectserve,value])
  const loadMore = () => {
    setTimeout(() => {
      setPage(page+4)
      setHasMore(shopList.length<8 || shopList.length>=16 ?false:true)
    },3000)
  }
  return (
    <div>
      <Dropdown>
        <Dropdown.Item key='默认排序' title='默认排序'>
          <div style={{ padding: 12 }}>
            <Radio.Group defaultValue='' value={value} onChange={(e) => setValue(e)
            }>
              <Space direction='vertical' block>
                <Radio block value=''>
                  综合排序
                </Radio>
                <Radio block value='distance' >
                  离我最近
                </Radio>
              </Space>
            </Radio.Group>
          </div>
        </Dropdown.Item>
        <Dropdown.Item key='全部美食' title='
        全部美食'>
          <div style={{ display: 'flex', height: 'auto' }}>
            <div style={{ width: '50%', height: 'auto', background: 'pink' }}>
              <div onClick={()=>{setSelectMother('')}}>全部</div>
              {
                mother.map(item => {
                  return <div key={item._id} onClick={()=>{setSelectMother(item._id)}}>{item.name}</div>
                })
              }
            </div>
            <div style={{ width: '50%', height: 'auto' }}>
              {
                child.map(item => {
                  return <div 
                  key={item._id} 
                  onClick={()=>{setSelectChild(item._id)}}
                  style={{background:selectChild===item._id?'red':'white'}}
                  >{item.name}</div>
                })
              }
            </div>
          </div>


        </Dropdown.Item>
        <Dropdown.Item key='筛选' title='筛选'>
          <CapsuleTabs onChange={(key) => setSelectserve(key)} >
            <CapsuleTabs.Tab title='全部' key='' />
            <CapsuleTabs.Tab title='堂食点餐' key='堂食点餐' />
            <CapsuleTabs.Tab title='堂食提前点餐' key='堂食提前点餐' />
            <CapsuleTabs.Tab title='外卖' key='外卖' />
            <CapsuleTabs.Tab title='到店自提' key='到店自提' />
          </CapsuleTabs>
        </Dropdown.Item>
      </Dropdown>
      <div>
        {
          shopList.map(item => {
            return <ProductCard
            desc={item.dist+'m '+item.serve}
            title={item.name}
            thumb={item.img}
            onClick={() => {
             navigate('/food')
            }
            }
          />
          })
        }
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
      

    </div>
  )
}
